<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<u-read-more close-text="查看全部商品" show-height="550" color="#F93D28">
			<vk-mall-order-goods-list :list="goods_sku_list_com" padding="30" bg-color="#ffffff" :mode="3"></vk-mall-order-goods-list>
		</u-read-more>

		<u-form :model="form1" ref="form1" :label-width="150" input-align="right" :clearable="false">
			<view class="card">
				<view class="content">
					<u-form-item label="退款类型" prop="refund_type" required>
						<vk-data-input-select
							v-model="form1.refund_type"
							:localdata="refundTypeCom"
							placeholder="请选择退款类型"
							@change="show.refund_type=true"
						></vk-data-input-select>
					</u-form-item>
					<u-form-item label="退款原因" prop="refund_reason" required>
						<vk-data-input-select
							v-model="form1.refund_reason"
							:show.sync="show.refund_reason"
							:localdata="refundReasonListCom"
							placeholder="请选择退款原因"
						></vk-data-input-select>
					</u-form-item>
					<u-form-item label="退款方式" prop="refund_method" required :border-bottom="false">
						<vk-data-input-select
							v-model="form1.refund_method"
							:localdata="[
								{ value: 0, label: '原路退回' },
							]"
							placeholder="请选择退款方式"
						></vk-data-input-select>
					</u-form-item>
				</view>
			</view>

			<u-form-item prop="refund_amount"  :border-bottom="false"></u-form-item>

			<view class="card" style="margin-top: 0;">
				<view class="content refund-price-box">
					<view class="refund-price-view">
						<view class="refund-price-title">
							退款金额
						</view>
						<view class="refund-price">
							<vk-data-input v-model="form1.refund_amount" type="money" :border="false" :disabled="form1.refund_type === 0 || form1.refund_type === ''"
							inputAlign="right" :max="vk.pubfn.toDecimal(maxRefundAmountCom/100, 2)" :customStyle="{color:'#f93d28'}" />
						</view>
					</view>
					<view class="refund-price-detail">
						<text>最多退</text>
						<text style="margin: 0 10rpx;">{{ vk.pubfn.priceFilter(maxRefundAmountCom) }}</text>
						<text>元</text>
						<view v-if="expressAmountCom" class="vk-contents">
							<text>，含配送费</text>
							<text style="margin: 0 10rpx;">{{ vk.pubfn.priceFilter(expressAmountCom) }}</text>
							<text>元</text>
						</view>

					</view>
				</view>
			</view>


			<view class="card">
				<view class="content">
					<u-form-item label="退款说明" prop="refund_desc" label-position="top">
						<vk-data-input v-model="form1.refund_desc" placeholder="补充描述，有助于商家更好的处理您的售后问题" type="textarea" input-align="left"/>
					</u-form-item>
					<u-form-item label="快递公司" prop="express_name" v-if="orderInfo.status >= 3">
						<vk-data-input v-model="form1.express_name" placeholder="寄回的快递公司名称" type="text" input-align="left"/>
					</u-form-item>
					<u-form-item label="快递单号" prop="express_no" v-if="orderInfo.status >= 3">
						<vk-data-input v-model="form1.express_no" placeholder="寄回的快递单号" type="text" input-align="left"/>
					</u-form-item>
					<u-form-item prop="images">
						<vk-data-upload v-model="form1.images" :limit="9" :show-header="true" title="添加图片" style="margin-top: 10rpx;"></vk-data-upload>
					</u-form-item>
					<view class="tips">如商品需要寄回，请联系客服获取寄回地址，并在此填写并上传您的寄回凭证（快递单）</view>
				</view>
			</view>
			<view style="display: block;height: 100rpx;"></view>
			<view class="goods-bottom-nav">
				<view class="vk-btn cancel" @click="cancel">取消</view>
				<view class="vk-btn submit" @click="submit">提交</view>
			</view>
		</u-form>



		<!-- 页面内容结束 -->
		<!-- 客服浮球组件 -->
		<vk-mall-contact-service></vk-mall-contact-service>
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
	var vk = uni.vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				goods_sku_list:[],
				orderInfo:{
					goods_sku_list:[],
				},
				// 表单请求数据
				form1:{
					refund_amount:"",
					refund_type:0,
					refund_reason:"",
					refund_method:0,
				},
				// 表单规则
				rules: {
					refund_amount: [
						{ required: true, type: "number", message: "请输入退款金额", trigger: ["change", "blur"] }
					],
					refund_type: [
						{ required: true, type: "number", message: "请选择退款类型", trigger: ["change", "blur"] }
					],
					refund_reason: [
						{ required: true, type: "string", message: "请选择退款原因", trigger: ["change", "blur"] }
					],
					refund_method: [
						{ required: true, type: "number", message: "请选择退款方式", trigger: ["change", "blur"] }
					]
				},
				show:{
					refund_type:false,
					refund_reason:false
				},
				scrollTop:0,
				loading:false,
				options:{}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			let that = this;
			setTimeout(() => {
				that.$refs.form1.setRules(that.rules);
			}, 100);
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				let that = this;
				that.form1._id = options._id;
				// 部分退款（部分退款功能已废弃，目前规则是只有订单处于已付款且未发货状态时，用户才能自主申请退款，此时全额退款重新下单即可）
				const eventChannel = that.getOpenerEventChannel();
				// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
				if (eventChannel.on) {
					eventChannel.on('data', (data) => {
						that.goods_sku_list = data.goods_sku_list;
						that.orderInfo = data.orderInfo;
						that.form1.refund_amount = that.maxRefundAmountCom;
						setTimeout(() => {
							that.show.refund_reason = true;
						}, 300);
					});
				}
				// 如果没有获取到数据，则返回退款商品选择页面
				setTimeout(() => {
					if (that.goods_sku_list.length == 0) {
						vk.redirectTo(`./goods-refund?_id=${that.options._id}`);
					}
				}, 1000);
			},
			cancel(){
				vk.navigateBack();
			},
			submit(){
				let that = this;
				let { form1 } = that;
				let goods_sku_list = that.goods_sku_list.map((item, index) => {
					return {
						_id: item._id,
						refund_num: item.applyRefundNum
					}
				});
				that.$refs.form1.validate(valid => {
					if (valid) {
						vk.callFunction({
							url: 'client/order.applyRefund',
							title:'请求中...',
							data:{
								...form1,
								goods_sku_list,
								//refund_express_amount: that.expressAmountCom,
							},
							success:function(data){
								vk.alert(data.msg,"提示","好的",()=>{
									that.orderInfo = data.orderInfo;
									const eventChannel = that.getOpenerEventChannel();
									if (eventChannel.emit) eventChannel.emit('update', data.orderInfo); // 触发A页面的 update 监听事件
									vk.navigateBack({
										delta: 2
									});
								});
							}
						});
					}
				});
			}

		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{
			// 最大可退款金额
			maxRefundAmountCom(){
				let that = this;
				let amount = 0;
				that.goods_sku_list.map((item, index) => {
					let { should_payment_amount=0, refund_amount=0 } = item;
					let maxAmount = should_payment_amount - refund_amount;
					let itemAmount = item.real_price * item.applyRefundNum;
					if (itemAmount > maxAmount) {
						itemAmount = maxAmount;
					}
					// 实际单价 * 退款数量
					amount += itemAmount;
				});
				// 再加上可退款的运费金额
				amount += that.expressAmountCom;
				return amount;
			},
			// 可退款的运费金额
			expressAmountCom(){
				let that = this;
				// 只有全额退款时，或商品已全部申请退款时，才有运费显示
				let amount = 0;
				let { orderInfo, goods_sku_list } = that;
				// 获取总共可退款的商品件数
				let maxGoodsNum = 0;
				orderInfo.goods_sku_list.map((item, index) => {
					let { buy_num, refund_num=0 } = item;
					maxGoodsNum += (buy_num - refund_num);
				});
				// 获取当前申请退款的商品件数
				let currentGoodsNum = 0;
				goods_sku_list.map((item, index) => {
					let { applyRefundNum } = item;
					currentGoodsNum += applyRefundNum;
				});
				if (maxGoodsNum === currentGoodsNum) {
					//如果相等，才有可退运费显示
					let express_amount = vk.pubfn.getData(that.orderInfo, "amount_info.express_amount", 0);
					let refund_express_amount = vk.pubfn.getData(that.orderInfo, "amount_info.refund_express_amount", 0);
					amount = express_amount - refund_express_amount;
				} else {
					// 否则，可退运费显示0
					amount = 0;
				}
				return amount;
			},
			// 退款类型
			refundTypeCom(){
				return [
					{ value: 0, label: '申请全额退款' },
					//{ value: 1, label: '申请部分退款' }, // 不支持部分退款，主要是部分退款会造成返利和业绩计算比较复杂
				];
			},
			// 退款原因
			refundReasonListCom(){
				let that = this;
				let { orderInfo } = that;
				let list = [];
				if (orderInfo.status === 1) {
					// 商品未发货时的选项
					list = [
						{ value: '多拍/拍错/不想要', label: '多拍/拍错/不想要' },
						{ value: '与商家协商一致退款', label: '与商家协商一致退款' },
						{ value: '地址/联系方式等信息填写错误', label: '地址/联系方式等信息填写错误' },
						{ value: '没用/少用优惠', label: '没用/少用优惠' },
						{ value: '未按约定时间发货', label: '未按约定时间发货' },
						{ value: '其他', label: '其他' }
					];
				} else {
					// 商品已发货时的选项
					list = [
						{ value: '与商家协商一致退款', label: '与商家协商一致退款' },
						{ value: '收到商品破损', label: '收到商品破损' },
						{ value: '商品错发/漏发', label: '商品错发/漏发' },
						{ value: '收到商品与描述不符', label: '收到商品与描述不符' },
						{ value: '商品质量问题', label: '商品质量问题' },
						{ value: '其他', label: '其他' }
					];
				}
				return list;
			},
			goods_sku_list_com(){
				let { goods_sku_list } = this;
				let list = [];
				goods_sku_list.map((item, index) => {
					if (item.applyRefundNum > 0) {
						list.push(item);
					}
				});
				return list;
			}
		}
	}
</script>
<style lang="scss" scoped>
.app{
	background-color: #f3f3f3;
	min-height: calc(100vh - var(--window-bottom) - var(--window-top));
}
.refund-price-box{
	.refund-price-view{
		display: flex;
		.refund-price-title{
			color: #333;
			font-size: 26rpx;
			flex: 1;
		}
		.refund-price{
			font-size: 28rpx;
			margin-top: 4rpx;
			color: #F93D28;
		}
	}
	.refund-price-detail{
		text-align: right;
		color: #666666;
		font-size: 24rpx;
		line-height: 40rpx;
	}
}

.card{
	background-color: #ffffff;
	margin-top: 40rpx;
	.content{
		padding: 20rpx 30rpx;
		.right-text{
			color: #303133;
		}
	}
	.title{
		padding: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom:1px solid #f8f8fa;
		background-color: #ffffff;
	}
}
.tips{
	color: #666666;
	font-size: 24rpx;
}
.goods-bottom-nav{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-left: 30rpx;
	line-height: 88rpx;
	height: 88rpx;
	z-index: 9;
	background-color: #fff;
	border-top: 1rpx solid #f3f3f3;
	display: flex;
	align-items: center;
	.vk-btn{
		height: 88rpx;
		line-height: 88rpx;
		width: 200rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.submit{
		flex: 2;
		color: #fff;
		background: #F93D28;
	}
	.cancel{
		flex: 1;
		color: #606266;
		background: #ffffff;
	}
}
</style>
